<template>
    <!-- 人民币自扣绑定还款申请 -->
    <div class="rmbBindingRepayment" v-loading="isLoading">
        <cardComponent pageTitle="人民币自扣绑定还款申请">
            <template slot="cardBody">
                <div class="dialogVisible">
                    <el-form
                        :model="searchFormOne"
                        ref="searchFormOne"
                        size="small"
                        label-width="30%"
                        :rules="rules"
                    >
                        <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                            <el-input disabled v-model="accountType" style="width: 200px;"></el-input>
                        </el-form-item>

                        <el-form-item label="自扣账号:" label-position="left" prop="ACCT">
                            <el-input v-model="searchFormOne.ACCT"></el-input>
                        </el-form-item>

                        <el-form-item label-position="left" prop="REPAYCODE" label="还款方式:">
                            <el-radio-group v-model="searchFormOne.REPAYCODE">
                                <el-radio label="M">最小还款额</el-radio>
                                <el-radio label="T">全额还款</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div class="btnBoxs">
                        <el-button type="primary" size="small" @click="hanleSure" class="btnBoxs">申请</el-button>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { getAccountTypeName } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { RegConfig } from '@/utils/RegConfig';

export default {
    name: 'rmbBindingRepayment',
    components: {
        cardComponent,
    },
    data() {
        return {
            searchFormOne: {
                ACCT: '',
                REPAYCODE: '', // 自动还款方式
            },
            FLAG: '', // 查询修改标志 1：查询；2：修改；3：新增；4：删除；
            isLoading: false,
            // 账户类别
            accountType: '',
            rules: {
                ACCT: [
                    { required: true, message: '请输入自扣账号', trigger: 'blur' },
                    { pattern: RegConfig.cardNo, message: '银行卡号应由13-21位数字组成', trigger: 'blur' },
                ],
                REPAYCODE: [
                    { required: true, message: '请选择自动还款方式', trigger: 'blur' },
                ],
            },
        };
    },
    filters: {

    },
    async mounted() {
        // this.searchFormOne.CARDNO = this.cardInfo_3004.CARDNO
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        // 点击按钮进行申请
        hanleSure() {
            this.$refs.searchFormOne.validate((valid) => {
                if (valid) {
                    this.$confirm('确定申请吗？', '提示', { customClass: 'warning', type: 'warning' }).then(() => {
                        this.FLAG = '3';
                        this.getCardInfo();
                    })
                        .catch(() => {

                        });
                } else {

                }
            });
        },
        // 对接4017接口
        getCardInfo() {
            this.isLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                PIN: '123456', // 密码
                FLAG: this.FLAG, // 查询修改标志 1：查询；2：修改；3：新增；4：删除；
                ACCT: this.searchFormOne.ACCT, // 还款账号 查询修改标志为2、3、4时，必填
                REPAYCODE: this.searchFormOne.REPAYCODE, // 还款方式 T＝全额 M＝最小还款额查询修改标志为2、3、4时，必填
                CHECKFLG: '000000000000000', // 0、1串。系统根据银行的选择来对检查项目的检查。默认值为0为不检查，1为检查。其中：第一位：证件号码（银行上送证件类型时，对证件类型的验证是跟随证件号码验证同时处理；不上送证件类型时，不强制检验）第二位：姓名第三位：证件类型第四位：客户参考资料编号
                FORCEFLAG: '0', // 还款账号强制生效标志 1－还款账号强制立即生效；强制生效，系统默认情况；必传
                IDTYPE: '', // 证件类型
                IDNO: '', // 证件号码
                ONUSFLAG: '', // 本行跨行标记
                RESERV: '', // 保留字段
                DEMOINFO: '', // 备注信息
                NAME: '', // 姓名
                CURRNUM: '156',

            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '4017';
            defaultParams.body.appBody = appBody;
            // 4017交易
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    this.isLoading = false;
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 111111);
                    if (result.sysHead.rspCd === '000000') {
                        this.$alert(
                            `${result.sysHead.rspMsg} 自扣号为 ${result.body.appBody.ACCT.trim()}`,
                            '提示',
                            {
                                customClass: 'success', type: 'success',
                            },
                        );
                        // this.$router.push({ path: '/outsideSystemForRepayment/rmbChangeBinging' });
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(
                            errorMsg,
                            '提示',
                            {
                                customClass: 'error', type: 'error',
                            },
                        );
                    }
                } else {
                    this.$alert(
                        '请求失败！',
                        '提示',
                        {
                            customClass: 'error', type: 'error',
                        },
                    );
                }
            });
        },

    },
};
</script>

<style lang='scss'>
.rmbBindingRepayment {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;

    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }
        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    .dialogVisible {
        margin: 30px auto 0;
        width: 50%;
        .el-form {
            width: 50%;
            text-align: center;
            margin: 0 auto;
        }
        .el-form-item__content {
            text-align: left;
        }
    }
    .btnBoxs {
        text-align: center;
    }
}
</style>
